<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="cache-control" content="no-cache" />
<title>Super Mario - Purchase</title>
<link rel="stylesheet" href="/media/css/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="/media/css/mario-style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="/media/js/jquery.mobile-1.1.0.min.js"></script>

<!-- Include the ZooZ script that contains the zoozCheckout() function -->
<script src="https://app.zooz.com/mobile/js/zooz-ext-web.js"></script>

<script type="text/javascript">
  
  $(document).ready(function() {
    $('#checkoutButton').click(function() {
      $.ajax({
        url: '/paiement/getToken?cmd=openTrx', // A call to server side to initiate the payment process
        dataType: 'html',
        success: function(response) {
          eval(response);
          var path = "https://" + window.location.host;
          // Call ZooZ API to start transaction
          zoozCheckout(data.token,      // The token received by the server's API call to "openTrx" 
              path + "/paiement/getToken",    // URL to return to after payment is completed
              path + "/failed.html",    // URL to return to in case a payment process has been aborted 
              "OhMyBars",// Bundle ID of the app as was registered in www.ZooZ.com 
              true);            // Environment flag: sandbox = true, production = false 
        }
      });
      
    });
        
  });
  
  </script>
</head>

<body>
  <div data-role="page" data-theme="b">
    <div data-role="content" data-contnet-theme="b">

      <table id="wrapper">
        <tr>
          <td><h3>Buy 50 mushrooms only for $0.99!</h3></td>
        </tr>

        <tr>
          <td><img alt="Super Mario" src="img/mario.png" /></td>
        </tr>
      </table>
      <button id="checkoutButton">Buy more mushrooms...</button>
    </div>
  </div>

</body>
</html>